<template>
  <div class="box">
    <div class="content">
      <h1>购物车</h1>

    <p>count:{{$store.state.count}}</p>
    <input type="button" value="修改count" @click="addCount">
    <hr/>
    <p>age:{{$store.state.age}}</p>
    <p>是否成年:{{$store.getters.isAdult}}</p>
    <input type="button" value="修改age" @click="addAge" />

  </div>
    <FooterBarVue class="footer"></FooterBarVue>
  </div>
</template>

<script>

import FooterBarVue from "@/components/FooterBar.vue";

export default {
  name: "ShoppingCar",
  components: {
    FooterBarVue,
  },
  created(){
    console.log("this.$store.state.count",this.$store.state.count)
  },
  methods:{
    addCount(){
      // 提交mutation
      this.$store.commit("mAddCount",2);

    },
    addAge(){
      // this.$store.commit("mAddAge",{
      //   inc:1
      // });
      // this.$store.commit({
      //   type:"mAddAge",
      //   inc:1
      // })        

      // 派发action
      // this.$store.dispatch("aAddAge")
      this.$store.dispatch({
        type:"aAddAge",
        aaa:12,
        bbb:13
      })
      
     }
  }

  // beforeRouteEnter(to,from,next) {
  //   console.log("ShoppingCar组件的守卫", this);//this是undefined。
  //   if (!sessionStorage.getItem("username")) {
  //     next("/Login?path=" + to.path);
  //   } else {
  //     next();
  //   }
  // }
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content {
  flex: 1;
  overflow: auto;
}
</style>